<template>
    <div id="userlist">
        <span>userlist</span>
        <div>{{ $route.meta.title }}</div>
        <div>userlist：{{ userlist }}</div>
        <div>page：{{ page }}</div>
        <div>total：{{ total }}</div>
        <div>size：{{ size }}</div>
        <div>get_userlist：{{ get_userlist }}</div>
        <div>get_userpage：{{ get_userpage }}</div>
        <div>get_usertotal：{{ get_usertotal }}</div>
        <div>{{ a_userlist(1) }}</div>
    </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default {
    computed: {
        ...mapState({
            userlist: state => state.user.userlist,
            page: state => state.user.page,
            total: state => state.user.total,
            size: state => state.user.size
        }),
        ...mapGetters({
            get_userlist: 'user/getters_userlist',
            get_userpage: 'user/getters_page',
            get_usertotal: 'user/getters_total'
        })
    },
    methods: {
        ...mapMutations({
            m_userlist: 'user/mutations_userlist',
            m_userpage: 'user/mutations_userpage',
            m_usertotal: 'user/mutations_usertotal'
        }),
        ...mapActions({
            a_userlist: 'user/actions_userlist'
        })
    }
}
</script>
<style scoped>
#userlist {
    background-color: pink;
    width: 400px;
    height: auto;
    margin: 200px auto;
    text-align: center;
    /* vertical-align: middle; */
}
</style>